<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue';

// 是否是桌面设备
const isDesktop = ref(window.innerWidth >= 1024);

// 监听窗口大小变化
const handleResize = () => {
  isDesktop.value = window.innerWidth >= 1024;
};

// 鼠标坐标
const mouseX = ref(0);
const mouseY = ref(0);

// 鼠标状态
const cursorState = reactive({
  isHovering: false,
  isClicking: false,
  elementType: ''
});

// 星星数组
const stars = ref([]);
const MAX_STARS = 10; // 更少的拖尾点数量

// 上次鼠标移动的位置和时间
let lastX = 0;
let lastY = 0;
let lastMoveTime = 0;
const MOVE_THRESHOLD = 5; // 鼠标需要移动的最小距离才创建新星星
const TIME_THRESHOLD = 50; // 创建星星的最小时间间隔(ms)

// 鼠标移动处理函数
const handleMouseMove = (e) => {
  if (!isDesktop.value) return;
  
  mouseX.value = e.clientX;
  mouseY.value = e.clientY;
  
  // 检测鼠标下方元素
  const element = document.elementFromPoint(e.clientX, e.clientY);
  if (element) {
    // 根据元素类型更新状态
    if (element.tagName === 'BUTTON' || element.tagName === 'A' || 
        element.closest('button') || element.closest('a') || 
        element.getAttribute('role') === 'button') {
      cursorState.isHovering = true;
      cursorState.elementType = 'clickable';
    } else if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
      cursorState.isHovering = true;
      cursorState.elementType = 'input';
    } else {
      cursorState.isHovering = false;
      cursorState.elementType = '';
    }
  }
  
  // 计算移动距离
  const dist = Math.sqrt(Math.pow(e.clientX - lastX, 2) + Math.pow(e.clientY - lastY, 2));
  const now = Date.now();
  
  // 只有当鼠标移动足够距离且超过时间阈值时才创建新星星
  if (dist > MOVE_THRESHOLD && now - lastMoveTime > TIME_THRESHOLD) {
    // 创建星星
    stars.value.push({
      id: now,
      x: e.clientX,
      y: e.clientY,
      size: Math.random() * 10 + 5, // 随机大小的星星
      opacity: 1,
      rotation: Math.random() * 360, // 随机旋转角度
      color: '#FFD700', // 金色星星
      lifespan: Math.random() * 1000 + 500 // 星星寿命在0.5~1.5秒之间
    });
    
    // 更新上次位置和时间
    lastX = e.clientX;
    lastY = e.clientY;
    lastMoveTime = now;
    
    // 限制星星数量
    if (stars.value.length > MAX_STARS) {
      stars.value.shift();
    }
  }
};

// 淡出星星的动画帧函数
const animateStars = () => {
  const now = Date.now();
  stars.value.forEach((star, index) => {
    const age = now - star.id;
    if (age > star.lifespan) {
      // 移除过期的星星
      stars.value.splice(index, 1);
    } else {
      // 随时间减少不透明度
      star.opacity = 1 - (age / star.lifespan);
    }
  });
  
  requestAnimationFrame(animateStars);
};

// 鼠标按下处理函数
const handleMouseDown = () => {
  if (!isDesktop.value) return;
  cursorState.isClicking = true;
};

// 鼠标释放处理函数
const handleMouseUp = () => {
  if (!isDesktop.value) return;
  cursorState.isClicking = false;
};

// 组件挂载时添加事件监听
onMounted(() => {
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mousedown', handleMouseDown);
  document.addEventListener('mouseup', handleMouseUp);
  window.addEventListener('resize', handleResize);
  
  // 启动星星动画
  requestAnimationFrame(animateStars);
  
  // 初始化鼠标位置
  lastX = window.innerWidth / 2;
  lastY = window.innerHeight / 2;
  lastMoveTime = Date.now();
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mousedown', handleMouseDown);
  document.removeEventListener('mouseup', handleMouseUp);
  window.removeEventListener('resize', handleResize);
});
</script>

<template>
  <div v-if="isDesktop" class="mouse-effect-container">
    <!-- 自定义鼠标指针 -->
    <div 
      class="custom-cursor" 
      :style="{ left: `${mouseX}px`, top: `${mouseY}px` }"
      :class="{
        'hovering': cursorState.isHovering,
        'clicking': cursorState.isClicking,
        'input-cursor': cursorState.elementType === 'input'
      }"
    >
      <div class="cursor-ring"></div>
      <div class="cursor-dot"></div>
    </div>
    
    <!-- 星星拖尾效果 -->
    <div 
      v-for="star in stars" 
      :key="star.id" 
      class="star"
      :style="{
        left: `${star.x}px`,
        top: `${star.y}px`,
        width: `${star.size}px`,
        height: `${star.size}px`,
        opacity: star.opacity,
        transform: `translate(-50%, -50%) rotate(${star.rotation}deg)`
      }"
    ></div>
  </div>
</template>

<style scoped>
.mouse-effect-container {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

/* 自定义鼠标指针样式 */
.custom-cursor {
  position: fixed;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  pointer-events: none;
  transition: transform 0.1s ease-out;
}

.cursor-ring {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s, opacity 0.2s;
  animation: pulse 1.5s infinite alternate;
}

.cursor-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
}

/* 星星效果 */
.star {
  position: fixed;
  pointer-events: none;
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );
  background-color: #FFD700; /* 金色星星 */
  box-shadow: 0 0 10px #FFD700, 0 0 20px rgba(255, 215, 0, 0.5);
  transition: opacity 0.3s ease;
  z-index: 9998;
}

/* 鼠标悬停在交互元素上的样式 */
.custom-cursor.hovering .cursor-ring {
  width: 40px;
  height: 40px;
  border-color: #41b883;
  animation: none;
}

.custom-cursor.hovering .cursor-dot {
  width: 8px;
  height: 8px;
  background-color: #41b883;
}

/* 鼠标点击时的样式 */
.custom-cursor.clicking .cursor-ring {
  width: 25px;
  height: 25px;
  border-color: #e74c3c;
  opacity: 0.6;
}

.custom-cursor.clicking .cursor-dot {
  width: 10px;
  height: 10px;
  background-color: #e74c3c;
}

/* 文本输入框的样式 */
.custom-cursor.input-cursor .cursor-ring {
  width: 2px;
  height: 25px;
  border: none;
  background-color: white;
  opacity: 0.7;
  border-radius: 0;
  animation: blink 1s infinite;
}

.custom-cursor.input-cursor .cursor-dot {
  opacity: 0;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
</style> 